<template>
	<view class="index-main">
		<view class="locations">
			<view class="locontion-msg" @click="get_Location()">
				<span style="locontion-name">{{CityName}}</span><u-icon name="map-fill" color="#171717"
					size="14"></u-icon>
			</view>
			<u-search searchIconColor="#007AFE" placeholder="找专家 搜商品" :clearabled="true" :showAction="false"
				:bgColor="'#fff'"></u-search>
			<u-icon name="server-fill" color="#171717" size="18"></u-icon>
		</view>
		<view class="bannerlist">
			<view class="banner-box" v-for="(item,index) in bannerType" :key="index" @click="navigatorTo(item.path)"
				:style="{backgroundColor:item.bgColor}">
				<image :src="item.img" alt="" class="banner-icon" mode="widthFix" />
				<view class="banner-msg">
					<view class="banner-name">{{item.name}}</view>
					<view class="banner-remark"><span v-for="(remark,i) in item.remark" :key="i">{{remark}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="title-more">
			<view class="left-more">
				<image src="@/static/icon/export.png" alt="" class="title-icon">
					<span class="title-name">专家团队</span>
			</view>

			<view class="right-more">
				<span>更多</span>
				<u-icon name="arrow-right-double" color="rgba(51,51,51,0.5)" size="14"></u-icon>
			</view>
		</view>
		<view class="export-list">
			<view class="export-box" v-for="(item,index) in exportList" :key="item.id">
				<view class="sculpture">
					<image class="sculpture-img" :src="item.specialistHeadImgUrl" alt="" mode="widthFix" />
					<view class="sculpture-clip" :class="index==1?'colors-clip':''"></view>
					<span class="sculpture-tips" :class="index==1?'colors-clip':''">{{item.specialistTitle}}</span>
				</view>
				<view class="export-name">
					{{item.specialistName}}
				</view>
				<view class="export-subs">
					{{item.administrativeName}}
				</view>
				<view class="export-type">
					{{item.specialistRank}}
				</view>
			</view>
		</view>
		<view class="title-more">
			<view class="left-more">
				<image src="@/static/icon/popular.png" alt="" class="title-icon">
					<span class="title-name">科普知识</span>
			</view>

			<view class="right-more">
				<span>更多</span>
				<u-icon name="arrow-right-double" color="rgba(51,51,51,0.5)" size="14"></u-icon>
			</view>
		</view>
		<view class="news" v-if="knowledges.length>0">
			<view class="view-new">
				<image class="new-img" src="../../static/icon/hot-new.png" mode="scaleToFill"></image>
				<view class="view-title">
					{{knowledges[1].knowledgeHeadline}}
				</view>
				<u-icon class="icon-right" name="arrow-right" color="#9BA3AA" size="16"></u-icon>
			</view>
			<view class="u-page" v-if="knowledges.length>1">
				<view class="u-demo-block">
					<text class="u-demo-block__title">{{knowledges[1].knowledgeHeadline}}</text>
					<view class="u-demo-block__content">
						<view class="album">
							<view class="album__content">
								<u--text margin="0 0 8px 0" :text="knowledges[1].knowledgeDescription"></u--text>
								<u--image :showLoading="true" radius="10" :src="knowledges[1].knowledgePicture" width="160rpx" height="160rpx"></u--image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> 
		<tabbar :routePath="'/pages/index/index'" :typeBar="1"/>
	</view>
</template>

<script>
	import {
		getLocationInfo
	} from "@/common/adress.js";
	import {
		findAllSpecialist,
		findAllKnowledge
	} from "@/common/api/index.js"
	export default {
		data() {
			return {
				CityName: '',
				bannerType: [{
						img: require("@/static/icon/banner1.png"),
						name: "健康商城",
						remark: ['超多好物', '康复保健'],
						bgColor: "#4C8BF7",
						path: ""
					},
					{
						img: require("@/static/icon/banner2.png"),
						name: "慢病管理",
						remark: ['专业管理', '病理监测'],
						bgColor: "#40D49F",
						path: "/pages/disease/disease"
					},
				],
				exportList: [],
				knowledges: [],
			}
		},

		methods: {
			//选择区域跳转
			get_Location() {
				uni.navigateTo({
					url: '/pages/locations/locations'
				})
			},
			//导航跳转
			navigatorTo(path) {
				if(!path)return
				uni.navigateTo({
					url: path
				})
			},
			//获得城市缓存
			getCityName() {
				let _that = this;
				setTimeout(function() {
					uni.getStorage({
						key: 'City_Name',
						success(res) {
							_that.CityName = res.data
						}
					})
				}, 500)
			},
			//获取定位
			async getLocationAuth() {
				try {
					let res = await getLocationInfo()
					//  console.log(res)
					this.CityName = res.city
					uni.setStorage({
						key: 'City_Name',
						data: res.city
					})
				} catch (e) {
					console.log(e)
				}

			},
			//获取专家
			async getAllSpecialist() {
				let res = await findAllSpecialist({
					pageNum: 1,
					pageSize: 3
				})
				// console.log(res)
				if (res.code != 200) return
				this.exportList = res.data.rows
			},
			//	获取科普知识
			async getAllKnowledge() {
				let res = await findAllKnowledge({
					pageNum: 1,
					pageSize: 2
				})
				if (res.code != 200) return
				// console.log(res)
				this.knowledges = res.data.rows
			},
		},
		onShow() {
			this.getAllSpecialist()
			this.getCityName()
			this.getLocationAuth()
			this.getAllKnowledge()
		},
		onLoad() {

		}
	}
</script>

<style lang="scss" scoped>
	.index-main {
		padding: 0 30rpx;
		padding-top: 40rpx;
		padding-bottom: 180rpx;
		.locations {
			font-size: 32rpx;
			font-weight: 500;
			color: #171717;
			display: flex;
			align-items: center;
			gap: 20rpx;

			.locontion-msg {
				display: flex;
				align-items: center;
				gap: 10rpx;

				.locontion-name {
					font-size: 32rpx;
				}
			}

			.u-icon__icon {
				color: #fff !important;
			}
		}

		.bannerlist {
			width: 100%;
			margin: 50rpx 0 60rpx 0;
			display: flex;
			justify-content: space-between;
			gap: 20rpx;

			.banner-box {
				width: 340rpx;
				display: flex;
				align-items: center;
				padding: 50rpx 20rpx;
				border-radius: 24rpx;

				.banner-icon {
					width: 84rpx;
					height: 82rpx;
					padding: 10rpx;
				}

				.banner-msg {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 10rpx;

					.banner-name {
						font-weight: 500;
						color: #FFFFFF;
						font-size: 34rpx;
						text-shadow: 0px 4rpx 8rpx #315AA1;
					}

					.banner-remark {
						display: flex;
						gap: 12rpx;
						justify-content: space-between;
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}

		.title-more {
			width: 100%;
			margin: 30rpx 0;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
            
			.left-more {
				display: flex;
				align-items: center;
				font-size: 38rpx;
				font-weight: 500;
				color: #333;
				gap: 10rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.right-more {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: rgba(51, 51, 51, 0.5);
			}
		}

		.export-list {
			width: 100%;
			display: flex;
			gap: 24rpx;

			.export-box {
				width: 214rpx;
				height: 303rpx;
				background: #Fff;
				border-radius: 13rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 14rpx;

				.sculpture {
					width: 100%;
					position: relative;
					display: flex;
					justify-content: center;

					.sculpture-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin: 0 auto;
					}

					.sculpture-clip {
						width: 152rpx;
						position: absolute;
						left: calc(50% - 76rpx) 100%;
						bottom: -50rpx;
						height: 120rpx;
						background: linear-gradient(180deg, #FCDA5B 0%, #FFCD00 100%);
						z-index: 2;
						-webkit-clip-path: polygon(100% 46%, 89% 58%, 100% 70%, 0 70%, 11% 59%, 0 46%);
						clip-path: polygon(100% 46%, 89% 58%, 100% 70%, 0 70%, 11% 59%, 0 46%);
					}

					.colors-clip {
						background: linear-gradient(180deg, #2A4885 0%, #040D35 100%);
						color: #fff;
					}

					.sculpture-tips {
						position: absolute;
						bottom: -14rpx;
						z-index: 3;
						font-size: 14rpx;
					}
				}

				.export-name {
					font-size: 34rpx;
					font-weight: 500;
					color: #333333;
					line-height: 34rpx;
					margin-top: 10rpx;
				}

				.export-subs {
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
				}

				.export-type {
					font-size: 24rpx;
					font-weight: 400;
					color: #A5A6A7;
					line-height: 24rpx;
				}
			}
		}

		.news {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 25rpx;
			.view-new {
				width: 100%;
				display: flex;
				align-items: center;
				gap: 24rpx;
				padding: 14rpx 24rpx;
				background: #Fff;
				border-radius: 13rpx;

				.new-img {
					width: 74rpx;
					height: 74rpx;
				}

				.view-title {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 28rpx;
					font-weight: 500;
					color: #9BA3AA;
				}

				.icon-right {
					margin-left: auto;
				}
			}
		}
	}
</style>
<style lang="scss">
	.album {
		@include flex;
		align-items: flex-start;
		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>